<!-- 区间站点树形公共组件 -->
<template>
	<view class="hwq-content g-tit">
		<navBar title="选择区间/站点" @click="() => { uni.navigateBack() }"></navBar>
		<u-search class="search-input" placeholder="请输入关键字"  v-model="keyword" :showAction="false" clearabled @search="blurSearch" @change="blurSearch" @clear="clearSearch"></u-search>
		<scroll-view scroll-y="true" class="hwq-scroll-box hwq-is-search">
			<view v-if="treeData && treeData.length > 0">
				<template v-for="item1 in treeData">
					<view class="item-box" :key="item1.id" @click="clickItem(item1.id, 0)">
						<view>{{`${item1.name}${item1.branchLineName ? '(' + item1.branchLineName + ')' : ''}`  || ""}}</view>
						<view class="ico-box">
							<u-icon :name="showItem(item1.id, 0) ? 'arrow-down' : 'arrow-right'" color="#A7AEBD" size="28"
								:customStyle="{ transform: 'scale(.8)' }"></u-icon>
						</view>
					</view>
					<template v-for="item2 in item1.list" v-if="showItem(item1.id, 0)">
						<view class="item-box item-box-area" :key="item2.id" @click="clickItem(item1.id + '-' + item2.id)">
							<view>{{ item2.name || "" }}</view>
							<view class="ico-box">
								<u-icon :name="showItem(item2.id, 1) ? 'arrow-down' : 'arrow-right'" color="#A7AEBD" size="28">
								</u-icon>
							</view>
						</view>
						<template  v-if="showItem(item2.id, 1)">
							<view class="item-box item-box-point" v-for="item3 in item2.list" :key="item3.id"  @click="selectedSite(item1,item2,item3)">
								<view class="stip">{{ item3.name || "" }}</view>
							</view>
						</template>
					</template>
				</template>
			</view>
			
			<view v-else>
				<u-empty  mode="list" text="暂无数据"
					icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import mixins from '@/utils/mixins.js'
import { publicSecurityNodeTree } from '@/api/qualitySafetyManagement/qualitySafetyManagement.js'
export default {
	name: 'intervalOrSite',
	mixins: [mixins],
	data() {
		return {
			treeData:[],
			keyword: null,
			activeItem: "",
		}
	},
	onLoad(param) {
		const eventChannel = this.getOpenerEventChannel();
		this.eventChannel = eventChannel
		if(param && param.objId) {
			this.objId = param.objId,
			this.objType = param.objType
			this.getTreeData(this.objId,this.objType,this.keyword)
		}
	},
	methods: {
		showItem(id, index = 0) {
			let arr = this.activeItem.split("-")
			return arr[index] == id
		},
		//点击菜单父选项
		clickItem(str) {
			if (str === this.activeItem && str.indexOf('-') !== -1) {
				this.activeItem = str.split('-')[0]
				return
			}
			if (str === this.activeItem) {
				this.activeItem = ''
			} else {
				this.activeItem = String(str)
			}

		},
		blurSearch(val) {
			this.keyword = val
			this.getTreeData(this.objId,this.objType,this.keyword)
		},
		clearSearch() {
			this.keyword = null
			this.getTreeData(this.objId,this.objType,this.keyword)
		},
		selectedSite(item1,item2,item3){
			// console.log(item1, item2, item3);
			let obj = {
				lineId:item1.id,
				lineSiteSectionId:item3.id,
				lineSiteSectionName:item3.name,
				lineSiteSectionType:item2.id
			}
			// console.log(obj);
			uni.navigateBack({
				success: () => {
					this.eventChannel.emit("setIntervalData", {
						data: obj
					})
				}
			});
		},
		getTreeData(objId,objType,keyword) {
			let projectId = uni.getStorageSync('isOwner')
			publicSecurityNodeTree({objId,objType,keyword,projectId:null}).then(res => {
				console.log(res);
				if(!res.success) return
				this.treeData = res.result || []
			})
		},		
	
	}
}
</script>

<style lang="scss" scoped>
.g-tit {
	/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
	/* #endif */
	.total-color {
		text-align: center;
		line-height: 28rpx;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background-color: #fe706c;
		color: #ffffff;
		margin-left: 20rpx;
		font-size: 10px;
	}

	.tit {
		position: absolute;
		top: 24rpx;
		left: 60%;
		z-index: 100;
		width: 40rpx;
		height: 40rpx;
		background: red;
		text-align: center;
		border-radius: 50%;
	}
}

.stip {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	// width: 300rpx;
	width: auto;
}

.item-box {

	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 30rpx;
	border-top: 2rpx solid #E2E5ED;

	&:first-child {
		border-top-width: 0;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #445469;
		line-height: 120rpx;
		border-bottom: 2rpx solid #E2E5ED;
	}
}

.item-box-area {
	padding-left: 30rpx;
}

.item-box-point {
	padding-left: 60rpx;
}
.search-input {
	padding-top: 22rpx !important;
}
/deep/ .u-search__content {
		height:88rpx
	}
</style>
